<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>监视属性</title>
        <script
            type="text/javascript"
            src="../vue.js"
        ></script>
    </head>
    <body>
        <div class="p">

            <h2>今天天气怎么样？{{info}}</h2>
            <button @click="changeWeather()">切换天气</button>
        </div>

        <!--监视属性：
        1.当被监视的属性发生变化的时候，回调函数自动调用，运行相关操作
        2.监视的属性必须存在，才能进行监视
        3.监视的两种写法：
        （1）new vue的时候传入watch的值
        （2）通过vm.$watch监视（IDE识别出错？？？）
        -->
        <script type="text/javascript">
            Vue.config.productionTip = false;
            const vm = new Vue({
                el: '.p',
                data: {
                    isHot: true,

                },
                computed: {
                    info() {
                        return this.isHot ? '炎热' : '凉爽';
                    }
                },
                methods: {
                    changeWeather() {
                        this.isHot = !this.isHot;
                    }
                },
                watch: {
                    isHot: {
                        immediate: true,//初始化的时候让handler调用
                        handler(newValue, oldValue) {   //回调函数
                            //handler什么时候被修改？当ishot发生变化的时候
                            console.log('ishot被修改了', newValue, oldValue)
                        }

                    },
/*

                    info: { //计算属性也可以被监视
                        handler(newValue, oldValue) {
                            //handler什么时候被修改？当info发生变化的时候
                            console.log('info被修改了', newValue, oldValue)

                        }
                    }
*/

                },
            })
        </script>
    </body>
</html>